<template>
	<view class="bg-white">
		<cu-custom :bgColor="NavBarColor" :isBack="true" backRouterName="index">
			<block slot="backText">返回</block>
			<block slot="content">{{incoTitle}}</block>
			<block slot="right">
				<view @click="filterAction" class="cuIcon-filter"></view>筛选
			</block>
		</cu-custom>
		<view class="container">
			<mescroll-uni ref="mescrollRef" @init="mescrollInit" :top="top" @down="downCallback" @up="upCallback"
				:bottom="top">
				<!-- 数据列表 -->
				<view class="al-list cu-list">
					<view class="incoming_item" v-for="(item,index) in msgList" :key="index"
						@tap="goIncomingDetail(item)" :data-target="'move-box-' + index">
						<view class="first_row">
							<view class="row_title">{{item.billNo}}</view>
							<view class="cuIcon-right text-gray"></view>
						</view>
						<view class="second_row">
							<view class="row_company">源单号:</view>
							<view class="right_row">
								<view class="row_center text-blue">{{item.srcNo}}</view>
								<view class="row_message text-grey">正常入库</view>
							</view>
						</view>
						<view class="second_row">
							<view class="row_depart">{{item.supplierId_dictText}}</view>
							<view class="right_row">
								<view class="row_center text-grey">{{item.createTime}}</view>
								<view class="row_message text-grey">{{item.invoiceType_dictText}}</view>
							</view>
						</view>
						<view class="bottom_line"></view>
						<view class="bottom_row">
							<view class="row_depart">入库金额:<text
									class="margin-left text-df text-orange">¥&nbsp;{{item.cost}}</text>
							</view>
							<view class="right_row">
								<view class="row_center text-grey">制单人:{{item.createBy_dictText}}</view>
								<view class="row_message text-grey">单据阶段:{{item.billStage_dictText}}</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>
		<view class="bottomView">
			<view class="bottomBtn" @click="handleAdd">添加订单</view>
		</view>
		<view class="cu-modal bottom-modal" :class="modalName=='ChooseModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-bar bg-white">
					<view class="action text-grey" @tap="hideModal">取消</view>
					<view class="action text-blue" @tap="confirModal">确定</view>
				</view>
				<view class="padding-sm">
					<view class="cu-form-group">
						<view class="title">单据编号</view>
						<input placeholder="编号" name="input" v-model="billNoStr"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">供应商</view>
						<picker @change="supChange" :value="supIndex" :range="supPicker">
							<view class="picker">
								{{supIndex>-1?supPicker[supIndex]:'请选择'}}
							</view>
						</picker>
					</view>
					<view class="cu-form-group">
						<view class="title">单据开始日期</view>
						<picker mode="date" :value="docStartDate" start="2024-02-01" end="2025-09-01"
							@change="dateStaChange">
							<view class="picker">
								{{docStartDate}}
							</view>
						</picker>
					</view>
					<view class="cu-form-group">
						<view class="title">单据结束日期</view>
						<picker mode="date" :value="docEndedDate" start="2024-02-01" end="2025-09-01"
							@change="dateEndChange">
							<view class="picker">
								{{docEndedDate}}
							</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const tabs = [{
		title: '采购入库',
		value: 0
	}, {
		title: '采购入库SN',
		value: 1
	}, {
		title: '退货入库',
		value: 2
	}, {
		title: '盘盈入库',
		value: 3
	}];
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";


	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				tabs,
				TabCur: 0,
				incoTitle: '',
				billNumber: '',
				docStartDate: '2025-01-01',
				docEndedDate: '2025-05-01',
				scrollLeft: 0,
				NavBarColor: this.NavBarColor,
				upOption: {
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量
					},
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 暂无数据 ~', // 提示

					},
					loading: '',
					text: '全部',
					isShowNoMore: false,
					textNoMore: '我是有底线的 >_<'
				},
				msgList: [], //列表数据
				read: "all",
				announcement1: [],
				url: "/stock/stkIo/list/101/0?column=createTime&order=desc",
				delUrl: '/sys/sysAnnouncementSend/delete',
				listTouchStart: 0,
				modalName: '',
				listTouchDirection: null,
				supIndex: -1,
				supPicker: [],
				basSupplierList: [],
				billNoStr: ''
			}
		},
		onLoad(option) {
			// console.log('onLoad==>>',this.$route)
			// console.log('params==>>', this.$route.params)
			// let queItem = JSON.parse(decodeURIComponent(this.$route.params.query));
			// console.log('incoType==>>', queItem.cid)
			this.TabCur = option.cid
			this.incoTitle = this.tabs[this.TabCur].title
			let datetime = new Date();
			let timestamp = datetime.getTime().toString();
			let year = datetime.getFullYear()
			let mnth = datetime.getMonth()
			let month = datetime.getMonth() + 1
			let day = datetime.getDate()
			mnth = mnth > 9 ? mnth : '0' + mnth
			month = month > 9 ? month : '0' + month
			day = day > 9 ? day : '0' + day
			this.docStartDate = year + '-' + mnth + '-' + day
			this.docEndedDate = year + '-' + month + '-' + day
			this.getBasSupplier();
		},
		onShow() {
			console.log('onShow==>>',this.$route)
			if (this.mescroll) {
				this.mescroll.resetUpScroll()
			}
		},
		computed: {
			top() {
				return this.CustomBar * 2.2
			},
			style() {
				var StatusBar = this.StatusBar;
				var CustomBar = this.CustomBar;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				return style
			},
		},
		methods: {
			requestStockList(page) {
				if (this.TabCur == 0) {
					this.url = "/stock/stkIo/list/101/0?column=createTime&order=desc"
				} else if (this.TabCur == 1) {
					this.url = "/stock/stkIo/list/101/1?column=createTime&order=desc"
				} else if (this.TabCur == 2) {
					this.url = "/stock/stkIo/list/1011/0?column=createTime&order=desc"
				} else if (this.TabCur == 3) {
					this.url = "/stock/stkIo/list/102/0?column=createTime&order=desc"
				} else {
					this.url = "/stock/stkIo/list/102/0/0?column=createTime&order=desc"
				}
				let paramsDic = {
					billDate_end: this.docEndedDate,
					billDate_begin: this.docStartDate,
					pageNo: page.num,
					pageSize: page.size
				}
				if (this.billNoStr) {
					paramsDic['billNo'] = this.billNoStr
				}
				if (this.supIndex > -1) {
					paramsDic['supplierId'] = this.basSupplierList[this.supIndex]['value'];
				}
				console.log('paramsDic==>>',paramsDic)
				this.$http.get(this.url, {
					params: paramsDic
				}).then(res => {
					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					this.announcement1 = res.data.result.records
					this.mescroll.endSuccess(this.announcement1.length);
					//console.log("url", res)
					//设置列表数据
					if (res.data.success) {
						console.log("res", res.data)
						for (let annItem of this.announcement1) {
							this.msgList.push(annItem)
						}
					}
					if (page.num == 1) {
						this.msgList = []; //如果是第一页需手动制空列表
						this.msgList = this.msgList.concat(this.announcement1); //追加新数据
					}
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			upCallback(page) {
				//联网加载数据
				console.log("page==>>", page)
				console.log("tabindex", this.TabCur)
				this.billNoStr = ''
				this.supIndex = -1
				this.requestStockList(page)
			},
			goIncomingDetail(item) {
				this.mescroll.resetUpScroll()
				let incomingItem = {
					id: item.id,
					cost: item.cost,
					srcNo: item.srcNo,
					billNo: item.billNo,
					srcBillId: item.srcBillId,
					createTime: item.createTime,
					opDept_dictText: item.opDept_dictText,
					operator_dictText: item.operator_dictText,
					createBy_dictText: item.createBy_dictText,
					billStage_dictText: item.billStage_dictText,
					supplierId_dictText: item.supplierId_dictText,
					invoiceType_dictText: item.invoiceType_dictText,
				}
				uni.navigateTo({
					url: '/pages/incoming/incomingDetail?item=' + encodeURIComponent(JSON.stringify(incomingItem))
				});
			},
			handleAdd() {
				uni.navigateTo({
					url: "/pages/incoming/incomingForm",
				})
			},
			filterAction() {
				this.modalName = 'ChooseModal'
			},
			hideModal(e) {
				this.modalName = ''
			},
			dateStaChange(e) {
				this.docStartDate = e.detail.value
			},
			dateEndChange(e) {
				this.docEndedDate = e.detail.value
			},
			supChange(e) {
				this.supIndex = e.detail.value
			},
			confirModal(e) {
				this.modalName = ''
				let page = {
					num: 1,
					size: 10
				}
				this.requestStockList(page)
			},
			getBasSupplier() {
				console.log("getBasSupplier")
				this.$http.get('/sys/dict/getDictItems/bas_supplier,aux_name,id').then(res => {
					if (res.data.success) {
						console.log("getBasSupplier==>>", res.data.result)
						this.supPicker = (this.basSupplierList = res.data.result).map(item => item.title)
					}
				})
			},
		}
	}
</script>

<style scoped>
	.e-btn {
		margin-bottom: 1rem;
	}

	.titlePad {
		margin-top: 0.6rem;
	}

	.cu-list>.move-cur {
		transform: translateX(-150rpx);

	}

	.nav .cu-item.cur {
		position: flex;
		z-index: 9;
		border-bottom: 4upx solid;
	}

	.innerLine {
		height: 4upx;
		margin-left: 4%;
		width: 60%;
		background-color: #f7f7f7
	}

	.incoming_item {
		width: 100%;
		height: 240rpx;
		display: flex;
		flex-direction: column;
		background: white;
		margin-bottom: 12rpx;
	}

	.first_row {
		width: 100%;
		display: flex;
		padding: 8rpx 16rpx;
		justify-content: space-between;
		align-items: center;
	}

	.row_title {
		margin: 4rpx;
		font-size: 32rpx;
	}

	.row_arrow {
		margin: 4rpx;
	}

	.second_row {
		width: 100%;
		display: flex;
		padding: 4rpx 16rpx;
		justify-content: space-between;
	}

	.row_company {
		margin: 4rpx;
		width: 28%;
		font-size: 24rpx;
	}

	.row_depart {
		margin: 4rpx;
		width: 36%;
		font-size: 24rpx;
	}

	.row_center {
		margin: 4rpx;
		font-size: 24rpx;
	}

	.row_message {
		margin: 4rpx;
		font-size: 24rpx;
	}

	.bottom_line {
		width: 96%;
		margin-left: 2%;
		height: 2rpx;
		margin-top: 16rpx;
		background-color: #FAF0E6;
	}

	.right_row {
		width: 64%;
		display: flex;
		justify-content: space-between;
	}

	.bottom_row {
		width: 100%;
		display: flex;
		margin-top: 12rpx;
		padding: 4rpx 16rpx;
		justify-content: space-between;
	}

	.bottomView {
		width: 100%;
		background-color: #fff;
		position: absolute;
		bottom: 0;
	}

	.bottomBtn {
		width: 96%;
		display: flex;
		justify-content: center;
		color: white;
		margin: 2%;
		padding: 20rpx;
		border-radius: 8rpx;
		background-color: #0081ff;
	}
</style>
